<template>
    <div class="app-container">
        <el-form ref="form" :model="form" label-width="4x" :rules="rules">
            <el-form-item label="白名单人员：" required>
                <div class="paper-user">
                    <el-tag size="small" v-for="user in trainUserList" :key="user.id" @close="removeUser(user)"
                        closable>{{
                            user.realName }} - {{ user.userName }}
                    </el-tag>
                    <el-button type="success" size="small" class="link-left wdd-button-mini" @click="userSelectClick">
                        选择员工
                    </el-button>
                </div>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
        </el-form>

        <el-dialog v-model="userPageDialog" width="98%">
            <el-form :model="userPage.queryParam" ref="queryForm" :inline="true">
                <el-form-item label="用户名：">
                    <el-input v-model="userPage.queryParam.userName" clearable></el-input>
                </el-form-item>
                <el-form-item label="真实姓名：">
                    <el-input v-model="userPage.queryParam.realName" clearable></el-input>
                </el-form-item>
                <el-form-item label="职位：">
                    <el-input v-model="userPage.queryParam.jobTitle" clearable></el-input>
                </el-form-item>
                <el-form-item label="人员类别：">
                    <tree-select v-model="userPage.queryParam.departmentIdList" :data="departmentTree" :clearable="true"
                        placeholder="人员类别" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="userQueryForm">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table v-loading="userPage.listLoading" ref="userMultipleTable" :data="userPage.tableData"
                @select="useSelect" @select-all="useSelectAll" border fit highlight-current-row style="width: 100%">
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column prop="id" label="Id" width="90px" />
                <el-table-column prop="userName" label="用户名" />
                <el-table-column prop="realName" label="真实姓名" />
                <el-table-column prop="jobTitle" label="职位" />
                <el-table-column prop="departmentLevel" label="人员类别" />
                <el-table-column prop="sexStr" label="性别" width="60px;" />
                <el-table-column prop="phone" label="手机号" />
                <el-table-column prop="email" label="邮箱" />
                <el-table-column prop="createTime" label="创建时间" width="160px" />
            </el-table>
            <pagination v-show="userPage.total > 0" :total="userPage.total" v-model:page="userPage.queryParam.pageIndex"
                v-model:limit="userPage.queryParam.pageSize" @pagination="userSearch" :autoScroll="false" />
        </el-dialog>
    </div>
</template>

<script>
import { EnumMap } from '@/api/EnumMap';
import { employeePage } from '@/api/user';
import { edit } from '@/api/train';
import {
    Delete as IconDelete,
    View as IconView
} from '@element-plus/icons-vue';
import useStore from '@/store';
import draggable from 'vuedraggable';
import TabDataUpload from '@/components/TabDataUpload/index.vue';

const { tagsView } = useStore();

export default {
    name: 'TrainCourseEdit',
    components: {
        IconDelete,
        IconView,
        draggable,
        TabDataUpload
    },
    data() {
        return {
            EnumMap: EnumMap,
            dialogVisible: false,
            form: {
                userIdList: [],
            },
            formLoading: false,
            userPageDialog: false,
            trainUserList: [],
            userPage: {
                queryParam: {
                    userName: null,
                    jobTitle: null,
                    realName: null,
                    departmentIdList: [],
                    excludeDepartmentIdList: [],
                    status: 1,
                    pageIndex: 1,
                    pageSize: 10
                },
                listLoading: false,
                tableData: [],
                total: 0
            },
        };
    },
    computed: {
    },
    created() {

    },
    methods: {
        submitForm() {
            console.log(this.form, '原始数据');
            let obj = JSON.parse(JSON.stringify(this.form));
            this.formLoading = true;
            console.log(111, obj);
            edit(obj)
                .then(data => {
                    if (data.code === 1) {
                        this.$message.success(data.message);
                        tagsView.delCurrentView(this).then(() => {
                            this.$router.push('/use/wl/list');
                        });
                    } else {
                        this.$message.error(data.message);
                    }
                })
                .finally(() => {
                    this.formLoading = false;
                });
        },
        // 选择员工
        userSelectClick() {
            this.userPageDialog = true;
            this.userSearch();
        },
        userQueryForm() {
            this.userPage.queryParam.pageIndex = 1;
            this.userSearch();
        },
        useSelectAll(selection) {
            console.log(selection, '9999');
            if (selection.length === 0) {
                this.userPage.tableData.forEach(item => {
                    this.useSelectArray(item, 3);
                });
            } else {
                selection.forEach(item => {
                    this.useSelectArray(item, 2);
                });
            }
            this.$message.success('操作成功');
        },
        useSelectArray(userItem, action) {
            console.log(userItem, '22222');
            let array = this.trainUserList;
            console.log(this.trainUserList, '4234');
            let index = null;
            for (let i = 0; i < array.length; i++) {
                if (userItem.id === array[i].id) {
                    index = i;
                }
            }
            if (action === 1) {
                // revert
                if (index == null) {
                    this.trainUserList.push({
                        createUser: userItem.id,
                        userName: userItem.userName,
                        realName: userItem.realName,
                        departmentId: userItem.departmentId
                    });
                    this.form.userIdList.push(
                        userItem.id,
                    );
                } else {
                    this.trainUserList.splice(index, 1);
                }
            } else if (action === 2) {
                // add
                if (index == null) {
                    this.trainUserList.push({
                        createUser: userItem.id,
                        userName: userItem.userName,
                        realName: userItem.realName,
                        departmentId: userItem.departmentId
                    });
                    this.form.userIdList.push(
                        userItem.id,
                    );
                }
            } else if (action === 3) {
                // remove
                if (index != null) {
                    this.trainUserList.splice(index, 1);
                }
            }
        },
        useSelect(selection, row) {
            console.log(selection);
            this.useSelectArray(row, 1);
            this.$message.success('操作成功');
        },
        removeUser(user) {
            this.trainUserList.splice(this.trainUserList.indexOf(user), 1);
            this.form.userIdList.splice(this.form.userIdList.indexOf(user.id), 1);
        },
        userSearch() {
            this.userPage.queryParam.excludeDepartmentIdList = this.form.departmentIdList
            this.userPage.listLoading = true;
            employeePage(this.userPage.queryParam)
                .then(data => {
                    console.log(data, '42343');
                    const re = data.response;
                    this.userPage.tableData = re.list;
                    this.userPage.total = re.total;
                    this.userPage.queryParam.pageIndex = re.pageNum;
                    this.$nextTick(() => {
                        let userSelectList = this.trainUserList;
                        console.log(userSelectList, '111')
                        this.userPage.tableData.forEach(row => {
                            for (let i = 0; i < userSelectList.length; i++) {
                                if (userSelectList[i].id === row.id) {
                                    this.$refs.userMultipleTable.toggleRowSelection(row, true);
                                }
                            }
                        });
                    });
                })
                .finally(() => {
                    this.userPage.listLoading = false;
                });
        },
    }
};
</script>
<style>
.el-tabs__nav-scroll {
    margin-left: 120px;
}
</style>
import { list } from '@/api/role'